
<template>
    <div class="index">
        <Spin fix v-if="spinShow">
            <Icon type="load-a" size=24 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
        </Spin>
        <Tabs type="card">
            <TabPane v-for="(item,key) in data" :label="key">
                <div  v-for="item2 in item">
                    <logListInfo :content="item2"></logListInfo>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>
<script>
import logListInfo from '@/components/log_list_info'
export default {
    data(){
        return{
            spinShow:true,
            data:'',
            traceid:this.$route.params.traceid,
            secretkey:this.$route.params.secretkey
        }
    },
    created(){
        this.get_trace();
    },
    components: {
        logListInfo
    },
    methods: {
        get_trace(){
            console.log('runid:',this.traceid);
            this.$ajax('get_trace',{id:this.traceid,secretkey:this.secretkey},(res)=>{
                console.log('23 trace:',res.data);
                this.data = res.data.data;
                this.spinShow = false;
            },(error)=>{})
        }
    }
};
</script>
<style scoped>
.index{
    padding: 30px;
}
.demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
}
.demo-spin-col{
    height: 100px;
    position: relative;
    border: 1px solid #eee;
}
</style>
